<template>
    <view v-if="!isConnected" :style="{'z-index': uZIndex}" class="u-no-network" @touchmove.stop.prevent="() => {}">
        <view class="u-inner">
            <image :src="image" class="u-error-icon" mode="widthFix"></image>
            <view class="u-tips">
                {{ tips }}
            </view>
            <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
            <!-- #ifdef APP-PLUS -->
            <view class="u-to-setting">
                请检查网络，或前往
                <text class="u-setting-btn" @tap="openSettings">设置</text>
            </view>
            <!-- #endif -->
            <view :hover-stay-time="150" class="u-retry" hover-class="u-retry-hover" @tap="retry">
                重试
            </view>
        </view>
    </view>
</template>

<script>
/**
 * noNetwork 无网络提示
 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
 * @tutorial https://www.uviewui.com/components/noNetwork.html
 * @property {String} tips 没有网络时的提示语（默认哎呀，网络信号丢失）
 * @property {String Number} zIndex 组件的z-index值（默认1080）
 * @property {String} image 无网络的图片提示，可用的src地址或base64图片
 * @event {Function} retry 用户点击页面的"重试"按钮时触发
 * @example <u-no-network></u-no-network>
 */
export default {
    name: "u-no-network",
    props: {
        // 页面文字提示
        tips: {
            type: String,
            default: '哎呀，网络信号丢失'
        },
        // 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖
        zIndex: {
            type: [Number, String],
            default: ''
        },
        // image 没有网络的图片提示
        image: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            isConnected: true, // 是否有网络连接
            networkType: "none", // 网络类型
        }
    },
    computed: {
        uZIndex() {
            return this.zIndex ? this.zIndex : this.$u.zIndex.noNetwork;
        }
    },
    mounted() {
        this.isIOS = (uni.getSystemInfoSync().platform === 'ios');
        uni.onNetworkStatusChange((res) => {
            this.isConnected = res.isConnected;
            this.networkType = res.networkType;
        });
        uni.getNetworkType({
            success: (res) => {
                this.networkType = res.networkType;
                if (res.networkType == 'none') {
                    this.isConnected = false;
                } else {
                    this.isConnected = true;
                }
            }
        });
    },
    methods: {
        retry() {
            // 重新检查网络
            uni.getNetworkType({
                success: (res) => {
                    this.networkType = res.networkType;
                    if (res.networkType == 'none') {
                        uni.showToast({
                            title: '无网络连接',
                            icon: 'none',
                            position: 'top'
                        })
                        this.isConnected = false;
                    } else {
                        uni.showToast({
                            title: '网络已连接',
                            icon: 'none',
                            position: 'top'
                        })
                        this.isConnected = true;
                    }
                }
            });
            this.$emit('retry');
        },
        async openSettings() {
            if (this.networkType == "none") {
                this.openSystemSettings();
                return;
            }
        },
        openAppSettings() {
            this.gotoAppSetting();
        },
        openSystemSettings() {
            // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
            // https://ask.dcloud.net.cn/docs/
            if (this.isIOS) {
                this.gotoiOSSetting();
            } else {
                this.gotoAndroidSetting();
            }
        },
        network() {
            var result = null;
            var cellularData = plus.ios.newObject("CTCellularData");
            var state = cellularData.plusGetAttribute("restrictedState");
            if (state == 0) {
                result = null;
            } else if (state == 2) {
                result = 1;
            } else if (state == 1) {
                result = 2;
            }
            plus.ios.deleteObject(cellularData);
            return result;
        },
        gotoAppSetting() {
            if (this.isIOS) {
                var UIApplication = plus.ios.import("UIApplication");
                var application2 = UIApplication.sharedApplication();
                var NSURL2 = plus.ios.import("NSURL");
                var setting2 = NSURL2.URLWithString("app-settings:");
                application2.openURL(setting2);
                plus.ios.deleteObject(setting2);
                plus.ios.deleteObject(NSURL2);
                plus.ios.deleteObject(application2);
            } else {
                var Intent = plus.android.importClass("android.content.Intent");
                var Settings = plus.android.importClass("android.provider.Settings");
                var Uri = plus.android.importClass("android.net.Uri");
                var mainActivity = plus.android.runtimeMainActivity();
                var intent = new Intent();
                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
                intent.setData(uri);
                mainActivity.startActivity(intent);
            }
        },
        gotoiOSSetting() {
            var UIApplication = plus.ios.import("UIApplication");
            var application2 = UIApplication.sharedApplication();
            var NSURL2 = plus.ios.import("NSURL");
            var setting2 = NSURL2.URLWithString("App-prefs:root=General");
            application2.openURL(setting2);
            plus.ios.deleteObject(setting2);
            plus.ios.deleteObject(NSURL2);
            plus.ios.deleteObject(application2);
        },
        gotoAndroidSetting() {
            var Intent = plus.android.importClass("android.content.Intent");
            var Settings = plus.android.importClass("android.provider.Settings");
            var mainActivity = plus.android.runtimeMainActivity();
            var intent = new Intent(Settings.ACTION_SETTINGS);
            mainActivity.startActivity(intent);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-no-network {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.u-inner {
    height: 100vh;
    @include vue-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -15%;
}

.u-tips {
    color: $u-tips-color;
    font-size: 28 rpx;
    padding: 30 rpx 0;
}

.u-error-icon {
    width: 300 rpx;
}

.u-to-setting {
    color: $u-light-color;
    font-size: 26 rpx;
}

.u-setting-btn {
    font-size: 26 rpx;
    color: $u-type-primary;
}

.u-retry {
    margin-top: 30 rpx;
    border: 1px solid $u-tips-color;
    color: $u-tips-color;
    font-size: 28 rpx;
    padding: 6 rpx 30 rpx;
    border-radius: 3px;
}

.u-retry-hover {
    color: #fff;
    background-color: $u-tips-color;
}
</style>
